<template>
    <div class="todo-container">
        <div class="todo-wrap">
<!--            <TodoHeader @addTodo="addTodo"/>&lt;!&ndash;给TodoHeader标签对象绑定addTodo事件监听 &ndash;&gt;-->
            <TodoHeader ref="header"/>
            <TodoList :todos="todos" />
            <todo-footer>
                <input type="checkbox" v-model="isCheckAll" slot="checkAll"/>
                <span slot="count">已完成{{completeSize}}/ 全部{{todos.length}} </span>
                <button class="btn btn-danger" v-show="completeSize>0" @click="delCompleteTodos" slot="delete"> 清除已完成任务</button>
            </todo-footer>
        </div>
    </div>
</template>
<!--
    绑定事件监听 === 订阅消息
    触发事件    === 发布消息
-->
<script>
    import PubPus from 'pubsub-js'
    import storageUtil from './util/storageUtil'

    import TodoHeader from './componets/TodoHeader'
    import TodoList from './componets/TodoList'
    import TodoFooter from './componets/TodoFooter'

    export default {
        name: "App",
        /*初始化数据展示*/
        data(){
            return {
                /*todos:[
                    {title:'吃饭',complete:false},
                    {title:'睡觉',complete:true},
                    {title:'coding',complete:false}
                ]*/
                /*从localStorage中读取数据*/
               todos:storageUtil.readTodos()
            }
        },
        computed:{
            completeSize(){
                return this.todos.reduce((preTotal,todo) => preTotal + (todo.complete ? 1 : 0),0)
            },
            isCheckAll:{
                get(){
                    return this.completeSize === this.todos.length  && this.completeSize > 0
                },
                set(value){ /*value是当前checkbox最新的值*/
                    this.selectAllTodos(value)
                }
            }
        },
        mounted(){  //执行异步代码
            //给TodoHeader标签对象绑定addTodo事件监听
            //this.$on('addTodo',this.addTodo)  //给App标签对象绑定的监听,不对
            this.$refs.header.$on('addTodo',this.addTodo);

            //订阅消息
            PubPus.subscribe('deleteTodo',(messageName,index) => {
                //调用函数
                this.deleteTodo(index)
            })
        },
        methods:{
            /*添加*/
            addTodo(todo){
                this.todos.unshift(todo)
            },
            /*删除*/
            deleteTodo(index){
                this.todos.splice(index,1)
            },
            /*删除所有选中的todo*/
            delCompleteTodos(){
                this.todos = this.todos.filter(todo => !todo.complete)
            },
            /*全选/全不选*/
            selectAllTodos(check){
                this.todos.forEach(todo => todo.complete = check)
            }
        },
        watch:{  //监视页面
           todos:{
               deep:true,//深度监视
               // handler:function (value) {
               //     //将todos最新的值保存到localStorage中
               //     //window.localStorage.setItem('todos_key',JSON.stringify(value))
               //      storageUtil.saveTodos(value)
               // }
               handler:storageUtil.saveTodos
           }
        },
        components:{TodoHeader,TodoList,TodoFooter}
    }
</script>

<style scoped>
    .todo-container {
        width: 600px;
        margin: 0 auto;
    }
    .todo-container .todo-wrap {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
</style>